<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>情感分析</title>
<!--    <script src="echarts.min.js"></script>
    <script src="echarts-wordcloud.js"></script>-->
    <script th:src="@{js/echarts.min.js}"></script>
    <script th:src="@{js/echarts-wordcloud.js}"></script>
    <script th:src="@{js/jquery-3.3.1.js}"></script>

</head>
<body>
<div id="main" style="width: 12000px;height: 500px; "></div>
<script  th:inline="javascript">
    var myChart = echarts.init(document.getElementById("main"));
    //用来存储数据
    //指定图表的配置项和数据
    var option={
        //标题
        title:{
            text:'情感分析（1:正面情感，0：负面情感，-1：未检测到情感波动）'
        },
        grid: {
            top: '5%',   // 等价于 y: '16%'
            left: '0%',
            right: '0%',
            bottom: '0%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis'
        },

        //工具箱
        //保存图片
        toolbox:{
            show:true,
            feature:{
                saveAsImage:{
                    show:true
                }
            }
        },
        //图例-每一条数据的名字叫销量
        legend:{
            data:['波动']
        },
        //x轴
        xAxis:{
            axisLabel: {
                interval: 0 , //设置X轴数据间隔几个显示一个，为0表示都显示

                margin: 8,
                formatter: function (params) {
                    var val = "";
                    if (params.length > 8) {
                        val = params.substr(0, 8) + '...';
                        return val;
                    } else {
                        return params;
                    }
            }},
            // boundaryGap值为false的时候，折线第一个点在y轴上
            boundaryGap: false,
            data:[[${strings}]]
        },
        //y轴没有显式设置，根据值自动生成y轴
        yAxis:{},
        //数据-data是最终要显示的数据
        series:[{
            name:'情感',
            type:'line',
            data:[[${values}]]
        }]
    };
    //使用刚刚指定的配置项和数据项显示图表
    myChart.setOption(option);
</script>

</body>
</html>